<!--
 * @Description:
 * @Author: william
 * @Date: 2025-02-17 16:47:40
 * @LastEditors: william
 * @LastEditTime: 2025-05-28 17:20:07
-->
<template>
  <BaseDialog
    v-model="dialogVisible"
    :title="$t('travelAgency.operator')"
    width="1100px"
    stretch
    :before-close="handleClose"
  >
    <el-descriptions
      v-loading="viewLoading"
      :column="4"
      border
      :label-width="140"
    >
      <el-descriptions-item width="200">
        <template #label>{{ $t('travelAgency.groupPeriodCode') }}</template>
        {{ formData.code || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('travelAgency.departureType') }}</template>
        <span>{{
          g_options.getOptionText(
            g_options.groupPeriodTypeOptions,
            formData.type,
            '--'
          )
        }}</span>
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('travelAgency.departureDate') }}</template>
        {{
          formData.startTime
            ? g_dayjs(formData.startTime).format('YYYY-MM-DD HH:mm:ss')
            : '--'
        }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('travelAgency.departureNumber') }}</template>
        {{ g_utils.formatValue(formData.peopleCountPlan) }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('travelAgency.weekday') }}</template>
        <span>{{
          formData.startTime
            ? g_options.getOptionText(
                g_options.dateDayOptions,
                g_dayjs(formData.startTime).day(),
                '--'
              )
            : '--'
        }}</span>
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('travelAgency.currentNumber') }}</template>
        {{ g_utils.formatValue(formData.peopleCountReal) }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('travelAgency.routeType') }}</template>
        <span>{{
          g_options.getOptionText(
            g_options.routeTypeOptions,
            formData.routeType,
            '--'
          )
        }}</span>
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('travelAgency.routeName') }}</template>
        {{ formData.routeName || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('travelAgency.groupCreator') }}</template>
        {{ formData.createUser || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('public.status') }}</template>
        <span
          class="dot-status"
          :class="
            g_options.getOptionText(
              g_options.tourDateStatusOptions,
              formData.status,
              '--',
              'class'
            )
          "
          >{{
            g_options.getOptionText(
              g_options.tourDateStatusOptions,
              formData.status,
              '--'
            )
          }}</span
        >
      </el-descriptions-item>
    </el-descriptions>
    <BaseTable
      v-loading="viewLoading"
      ref="refRouteTable"
      :data="formData.tripList"
      row-key="id"
      style="margin: 10px 0"
    >
      <TableColumn :label="$t('fleet.departure')" class="ignore">
        <TableColumn
          prop="startRegionCode"
          :label="$t('public.region')"
          :column-width="routeColumnWidth.startRegionCode"
        >
          <template #default="{ row }">
            <span>{{ g_utils.getRegionName(row.startRegionCode) }}</span>
          </template>
        </TableColumn>
        <TableColumn
          prop="startAddress"
          :label="$t('public.detailAddress')"
          :column-width="routeColumnWidth.startAddress"
        />
      </TableColumn>
      <TableColumn :label="$t('fleet.destination')" class="ignore">
        <TableColumn
          prop="endRegionCode"
          :label="$t('public.region')"
          :column-width="routeColumnWidth.endRegionCode"
        >
          <template #default="{ row }">
            <span>{{ g_utils.getRegionName(row.endRegionCode) }}</span>
          </template>
        </TableColumn>
        <TableColumn
          prop="endAddress"
          :label="$t('public.detailAddress')"
          :column-width="routeColumnWidth.endAddress"
        />
      </TableColumn>
      <TableColumn
        prop="startTime"
        :label="$t('fleet.departureTime')"
        :column-width="routeColumnWidth.startTime"
      />
      <TableColumn
        prop="endTime"
        :label="$t('public.endTime')"
        :column-width="routeColumnWidth.endTime"
      />
      <TableColumn
        prop="through"
        :label="$t('fleet.passingScenery')"
        :column-width="routeColumnWidth.through"
      />
      <!-- <TableColumn
        prop="action"
        fixed="right"
        :label="$t('public.action')"
        :column-width="routeColumnWidth.action"
      >
        <template #default="{ row, $index }">
          <el-button text @click="handleTravelEdit(row, $index)">
            {{ $t('public.edit') }}
          </el-button>
          <el-button text @click="handleTravelDelete(row, $index)">{{
            $t('public.delete')
          }}</el-button>
        </template>
      </TableColumn> -->
    </BaseTable>
    <div class="tabs-container">
      <el-tabs v-model="tabValue" style="flex: 1" @tab-change="handleTabChange">
        <el-tab-pane
          v-for="item in g_options.inquiryFormTypeOptions"
          :key="item.value"
          :name="item.value"
          :label="item.label"
        />
      </el-tabs>
      <el-button
        type="primary"
        style="margin-left: 20px"
        @click="handleInquiry"
        >{{ $t('travelAgency.makeInquiry') }}</el-button
      >
    </div>
    <BaseTable
      v-loading="customerLoading"
      ref="refCustomerTable"
      :data="customerTableData"
      row-key="id"
      style="margin: 10px 0"
    >
      <TableColumn
        prop="merchantNickName"
        :label="$t('travelAgency.merchantName')"
        :column-width="customerColumnWidth.merchantNickName"
      />
      <TableColumn
        prop="status"
        :label="$t('fleet.orderStatus')"
        :column-width="customerColumnWidth.status"
      >
        <template #default="{ row }">
          <span
            class="dot-status"
            :class="
              g_options.getOptionText(
                g_options.inquiryOrderStatusOptions,
                row.status,
                '--',
                'class'
              )
            "
            >{{
              g_options.getOptionText(
                g_options.inquiryOrderStatusOptions,
                row.status,
                '--'
              )
            }}</span
          >
        </template>
      </TableColumn>
      <TableColumn
        prop="startTime"
        :label="$t('public.startTime')"
        :column-width="customerColumnWidth.startTime"
      />
      <TableColumn
        prop="endTime"
        :label="$t('public.endTime')"
        :column-width="customerColumnWidth.endTime"
      />
      <TableColumn
        prop="merchantUserName"
        :label="$t('public.userName')"
        :column-width="customerColumnWidth.merchantUserName"
      />
      <TableColumn
        prop="merchantPrice"
        :label="$t('travelAgency.price')"
        :column-width="customerColumnWidth.merchantPrice"
      />
      <TableColumn
        prop="action"
        fixed="right"
        :label="$t('public.action')"
        :column-width="customerColumnWidth.action"
      >
        <template #default="{ row, $index }">
          <el-button
            text
            :disabled="row.status + '' === '4' || row.status + '' === '5'"
            @click="handleCustomerConfirm(row)"
          >
            {{ $t('travelAgency.confirmInquiry') }}
          </el-button>
          <el-button
            text
            :disabled="row.status + '' === '4' || row.status + '' === '5'"
            @click="handleCustomerCancel(row)"
            >{{ $t('public.cancel') }}</el-button
          >
        </template>
      </TableColumn>
    </BaseTable>
    <BasePagination
      v-model:page-size="pageSize"
      v-model:current-page="pageNum"
      :total="total"
      @change="getAskOrderList()"
    />
    <template #footer>
      <div class="detail-dialog-footer">
        <el-button plain @click="handleClose">{{
          $t('public.close')
        }}</el-button>
      </div>
    </template>
  </BaseDialog>
  <!-- <AddTravel
    v-if="addTravelVisible"
    v-model="addTravelVisible"
    :row="travelRow"
    :type="travelType"
    @add="handleAddTravelCb"
    @update="handleUpdateTravelCb"
  /> -->
  <InquiryFormDialog
    v-if="inquiryVisible"
    v-model="inquiryVisible"
    :id="props.id"
    :type="tabValue"
    :travel-list="travelList"
    @update="handleInquiryFormCb"
  />
</template>

<script setup>
// import AddTravel from './AddTravel.vue'
import InquiryFormDialog from './InquiryFormDialog.vue'

const props = defineProps({
  id: {
    type: String,
    default: ''
  }
})

const dialogVisible = defineModel({
  type: Boolean,
  default: false
})
const viewLoading = ref(false)
const formData = ref({
  tripList: []
})
const refRouteTable = ref(null)
const routeColumnWidth = ref({})
const tabValue = ref(g_options.inquiryFormTypeOptions[0].value)
const customerLoading = ref(false)
const refCustomerTable = ref(null)
const customerTableData = ref([])
const customerColumnWidth = ref({})
const total = ref(0)
const pageSize = ref(10)
const pageNum = ref(1)
// const addTravelVisible = ref(false)
// const travelRow = ref({})
// const travelType = ref('add')
// const travelTableIndex = ref(0)
const inquiryVisible = ref(false)
const travelList = ref([])

watch(
  () => formData.value.tripList,
  nv => {
    useTableColumnWidth({
      refTable: refRouteTable.value
    }).getTableColumnWidth(data => {
      routeColumnWidth.value = data
    })
  },
  {
    // immediate: true,
    deep: true
  }
)

watch(
  () => customerTableData.value,
  nv => {
    useTableColumnWidth({
      refTable: refCustomerTable.value
    }).getTableColumnWidth(data => {
      customerColumnWidth.value = data
    })
  },
  {
    // immediate: true,
    deep: true
  }
)

onMounted(() => {
  getFormData()
  getAskOrderList()
})

const getFormData = () => {
  viewLoading.value = true
  formData.value.tripList = []
  g_api.travelAgency
    .apiTeamDetail({ id: props.id })
    .then(({ code, data }) => {
      if (code === '200' && data) {
        formData.value = data
      }
    })
    .finally(_ => {
      viewLoading.value = false
    })
}

const getAskOrderList = () => {
  customerLoading.value = true
  customerTableData.value = []
  g_api.travelAgency
    .apiTeamAskOrderList({
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      type: tabValue.value,
      teamId: props.id
    })
    .then(({ code, data }) => {
      if (code === '200' && data) {
        total.value = data.total
        customerTableData.value = data.items
      }
    })
    .finally(_ => {
      customerLoading.value = false
    })
}

const handleClose = () => {
  dialogVisible.value = false
}

// const handleAddTravelCb = data => {
//   formData.value.tripList.push(data)
// }

// const handleUpdateTravelCb = data => {
//   // console.log('data', data)
//   formData.value.tripList.splice(travelTableIndex.value, 1, data)
// }

// const handleTravelEdit = (row, i) => {
//   addTravelVisible.value = true
//   travelRow.value = row
//   travelType.value = 'edit'
//   travelTableIndex.value = i
// }

// const handleTravelDelete = (row, i) => {
//   formData.value.tripList.splice(i, 1)
// }

const handleTabChange = _ => {
  getAskOrderList()
}

const handleInquiry = () => {
  inquiryVisible.value = true
  travelList.value = JSON.parse(JSON.stringify(formData.value.tripList)).map(
    item => {
      item.peopleCount = formData.value.peopleCountPlan
      return item
    }
  )
}

const handleInquiryFormCb = data => {
  console.log('handleInquiryFormCb-data', data)
  getAskOrderList()
}

const askOrderUpdate = (row, status) => {
  customerLoading.value = true
  g_api.travelAgency
    .apiTeamAskOrderUpdate({
      id: row.id,
      merchantOrderId: row.merchantOrderId,
      status
    })
    .then(res => {
      if (res.code === '200') {
        ElMessage({
          message: res.message,
          type: 'success'
        })
        getAskOrderList()
      }
    })
    .finally(_ => {
      customerLoading.value = false
    })
}
const handleCustomerConfirm = row => {
  askOrderUpdate(row, 3)
}

const handleCustomerCancel = row => {
  askOrderUpdate(row, 5)
}
</script>

<style scoped lang="scss">
.tabs-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  :deep(.el-tabs__nav.is-top) {
    width: 100%;
    justify-content: space-around;
  }
}
</style>
